<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    background-color: #f0f0f0;
}

.top {
    width: 94%;
    background-color: #fff;
    margin: 10px;
    font-weight: 900;
    padding: 10px;
    border-radius: 15px;

    .com {
        display: flex;
        flex-wrap: wrap;

        img {
            width: 106px;
            height: 65px;
            margin-left: 2px;
        }
    }

    #penson {
        width: 100px;
        height: 60px;
        border: 1px dashed #ccc;
        margin: 2px 5px;
        border-radius: 5px;
    }

    .active {
        background-color: rgb(190, 236, 254);
        border: 2px solid blue;
        color: #fff;
        
    }

}

.center {
    width: 94%;
    height: 200px;
    background-color: #fff;
    margin: 10px;
    padding: 10px;
    border-radius: 15px;
    font-weight: 900;
}

.btm {
    width: 94%;
    height: 120px;
    background-color: #fff;
    margin: 5px 10px;
    padding: 10px;
    border-radius: 15px;
    font-weight: 900;

    img {
        width: 100%;
    }
}

main {
    overflow-y: scroll;
    height: calc(100vh - 140px);
}

main {
    overflow-y: scroll;
    height: calc(100vh - 140px);
}

footer {
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 10;
    position: fixed;
    z-index: 10;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
</style>
<template>
    <div class="box">
        <van-nav-bar title="复诊开方申请" left-arrow @click-left="$router.go(-1)" />
        <main>
            <div class="top">
                <van-cell style="font-size: 16px;" title="选中就诊人" required />
                <div class="com">
                    <template v-if="listData.length > 0">
                        <div id="penson" :class="{ active: actives === v.id }" v-for="(v, i) in listData" :key="i"
                            ref="active" @click="onPerson(v)">
                            <p style="font-size: 15px;text-align: center;line-height: 27px;"> {{ v.username }} </p>
                            <p style="font-size: 14px;text-align: center;line-height: 27px;">{{ v.userage }}岁 &emsp; {{
                                v.usersex }} </p>
                               
                        </div>
                    </template>

                    <img @click="$router.push('/patients')" src="../../assets/fu1.png" alt="">
                </div>
                <!-- <button @click="ondelete">删除183</button> -->
                <p style="display: flex; align-items: center;font-size: 18px;"><van-cell title="选择线下已有确诊疾病"
                        style="width: 200px;font-size: 16px;" required /> <span
                        style="font-size: 14px; color: red;">(至少选择1种疾病)</span>
                </p>
                <div style="display: flex; align-items: center;">
                    <template v-for="(item, int) in state" :key="int">
                        <p v-if="state !== null"
                            style="width: 100px;height: 58px;border: 1px dashed #ccc;margin: 0 5px;line-height: 50px;text-align: center;font-size: 16px; position: relative;">
                            {{ item }}
                            <span style="position: absolute;top: -25px;right: -5px;" @click="onDelete(state, int)"> x
                            </span>
                        </p>
                    </template>
                    <img style="width: 100px;height: 60px; margin-left: 15px;" src="../../assets/fu2.png" alt="" 
                        @click="show = true">
                </div>
                <!-- 选择疾病 -->
                <van-popup title="添加临床诊断" v-model:show="show" position="bottom" :style="{ height: '60%' }" closeable
                    @click-overlay="onClickOverlay" @click-close-icon="onClickCloseIcon">
                    <van-search v-model="adminchildrenname" placeholder="请输入搜索关键词" @search="onSearch" />
                    <div v-if="isSearch">
                        <template v-for="(item, i) in searchList" :key="i">
                            <li :class="{ activees: searchactive === item.doctorid }"
                                style="line-height: 35px; font-size: 16px;margin-left: 20px;"
                                @click="onSearchList(item)">
                                {{ item.adminchildrenname }}
                            </li>
                        </template>
                    </div>
                </van-popup>
            </div>

            <div class="center">
                <van-cell style="font-size: 16px;" title="复诊凭证（选填）" />
                <p style="font-weight: 100;color: #ccc;">&emsp;门诊/住院病历、检查单/检查结果、处方、住院单等</p>

                <van-uploader v-model="value" style="margin-left: 15px;margin-top: 10px;">
                    <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                    </template>
                </van-uploader>

            </div>

            <div class="btm" @click="$router.push('/cart')">
                <van-cell style="font-size: 16px;" title="申请用药" />
                <img src="../../assets/fu4.png" alt="">
            </div>
            <div v-for="(item, index) in cartList" :key="index"
                style="display: flex;min-height:100px; border-bottom: 1px solid #f1f1f1;padding: 0 10px;background-color: #fff;border-radius: 5px;">

                <img :src="item.restorativesimage" alt="" style="flex-shrink:0;width:80px;" height="80">
                <div>
                    <h3> &emsp;{{ item.restorativesname }}</h3>
                    <span>药品类型:{{ item.restorativestitle }},</span>
                    <span>药品:{{ item.restorativesstate }}</span>
                    <span style="color: red;">￥{{ item.restorativesprice }}元</span>
                    <div>
                        <van-stepper v-model="item.count" style="margin-left: 180px;" />
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <van-button type="primary" block @click="onPush">提交</van-button>
        </footer>


    </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import type { ListDatagete } from '@/Type/indeType';
import { useRouter } from 'vue-router';
import { useCartStore } from '@/stores/cart';
import { computed } from 'vue';

interface User {
    id: number,
    username: string,
    usersex: string,
    userphone: string,
    userbirthday: string
    userstanding: string,
    userage: number
}
const router = useRouter()

// 搜索框
const isSearch = ref(false)
// 就诊人的选择高亮
const actives = ref(0)
// 搜索并且的高亮选择
const searchactive = ref(0)
// 上传图片
const value = ref()
// 搜索列表变量
const listData = ref<User[]>([])
const searchList = ref<ListDatagete[]>([])
const show = ref(false);

const ondelete=()=>{
    axios.delete('/api/user/list',{params:{id:181}})
    alert('删除成功')
}


const onClickOverlay = () => {
    console.log('开');
};
const onClickCloseIcon = () => {
    console.log('关');
};

const adminchildrenname = ref('')

const getUser = async () => {
    const res = await axios.get('/api/user/list')
    listData.value = res.data.data
    console.log(listData.value);

}

// 选择就诊人
const onPerson = (v: User) => {
    actives.value = v.id
    // console.log(actives.value);
}

// 选择疾病
const state = ref([])
const onSearchList = (item: ListDatagete) => {
    searchactive.value =  item.doctorid ? item.doctorid : 0
    // console.log(item);
    alert(`'已选择'+${item.adminchildrenname}`)
    state.value.push(item.adminchildrenname as never)

}

// 搜索
const onSearch = () => {
    axios.get('/api/search/office', { params: { searchValue: adminchildrenname.value } }).then((res) => {
        // console.log(res.data.data);
        searchList.value = res.data.data
    })
    isSearch.value = true
}

const onDelete = (item: string[], int: number) => {
    item.splice(int, 1)
}

// 使用购物车store
const userStore = useCartStore()
// 计算属性，获取购物车列表
const cartList = computed(() => userStore.cartList)


const onPush = () => {
    // router.push('/talkDoctor')
    if (actives.value === 0) {
        alert('请选择就诊人')
    }
    else if(state.value.length === 0){
        alert('请选择疾病')
    }else{
        router.push('/talkDoctor')
    }
}

getUser()

</script>